Skip to content

feat: design system preview page & dark mode tuning#22

Merged
rrbe merged 11 commits intomainfrom
feat/design-system-preview
Mar 31, 2026
Merged

feat: design system preview page & dark mode tuning#22
rrbe merged 11 commits intomainfrom
feat/design-system-preview

Conversation

@rrbe
Copy link
Copy Markdown
Owner

@rrbe rrbe commented Mar 31, 2026

Summary

  • Add design-system.html — a standalone component showcase page accessible at /design-system.html during pnpm dev, with Light/Dark/System theme toggle
  • Tune dark mode CSS tokens for better contrast: lift solid surfaces, bump transparent overlay opacities, strengthen borders and shadows

What's in the preview page

Covers every visual element in the app across both themes:

  • Color tokens: ink hierarchy, teal accent, surfaces, semantic colors
  • Buttons (primary/ghost/danger), badges (all variants), form controls
  • Cards, warning/error panels, path preview
  • All 13 launcher icons with branded backgrounds
  • File status + inline diff viewer
  • Commit list, toast notifications, worktree sidebar items, action logs
  • Typography scale

Dark mode fixes

  • Solid surfaces lifted (--surface-card #1c1a18#1e1c19, --surface-input #201e1c#24221f)
  • Transparent surface opacities increased (~30-40%) so rows, badges, and buttons read clearly
  • Border opacities increased for visible card/input separation
  • Shadow and backdrop strengthened for depth cues
  • Ghost button bg bumped for visibility

Test plan

  • Run pnpm dev and open http://localhost:1420/design-system.html
  • Toggle Light / Dark / System — verify all sections render correctly in both modes
  • Verify dark mode cards have visible borders and buttons have substance
  • Verify light mode is unaffected by dark mode token changes
  • pnpm build passes

🤖 Generated with Claude Code

rrbe and others added 9 commits March 30, 2026 12:22
Strip the UI to its essence: remove all gradients, glass-morphism,
backdrop-filter blur, serif fonts, decorative shadows, and per-launcher
gradient backgrounds. Replace with a near-monochrome palette (#fafafa
light / #111111 dark), flat solid surfaces, thin borders as primary
separators, and a single muted teal accent used sparingly for
interactive states.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Shift all neutrals from pure gray to warm-tinted:
- Background: #fafafa → #f8f6f3 (warm off-white, like quality paper)
- Ink: #1a1a1a → #1c1917 (warm dark, like walnut ink)
- Surfaces: warm whites (#fefdfb, #f7f5f2, #f3f1ee)
- Borders/shadows: warm-tinted rgba(28,25,23,...) instead of pure black
- Dark mode: #111111 → #151312 (warm dark, like aged wood)
- Dark ink: #d4d4d4 → #dbd6d0 (warm light)

Still minimalist, still restrained — but now it feels like real
materials instead of a grayscale printout.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The previous warm-gray palette felt lifeless — all surfaces at the
same warmth level with no temperature contrast. New approach:

Light mode "Sand & Sage":
- Page: #f4f1eb (warm parchment)
- Cards: #fbf9f6 (cream white, lighter than page — creates lift)
- Topbar/sidebar: #edeae4 (sand, darker than page — creates weight)
- Ink: #2a2520 (deep espresso, not pure black)
- Accent: #4a7c6a (sage green, warmer than clinical teal)

Dark mode "Charcoal & Cream":
- Page: #161410 (warm charcoal)
- Cards: #1e1c19 (warmer lift)
- Ink: #d8d2ca (warm cream, not pure gray)
- Accent: #6ab8a0 (soft sage)

The key: surface layers now have visible temperature differences
between them instead of all being the same shade of warm gray.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
When the filesystem watcher fires worktrees-changed, the frontend
calls loadRepoInner → open_repo, which previously always restarted
the watcher. On macOS (FSEvents), creating a new watcher can emit
initial events for existing directory contents, causing an infinite
loop: watcher fires → reload → restart watcher → fires again.

Fix: skip watcher restart if already watching the same repo path.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Rename _repo_root → repo_root in WatcherInner (actively used, not
  just held for drop)
- Bump --ink-tertiary opacity 0.4 → 0.46 (light) and 0.42 → 0.48
  (dark) for WCAG AA contrast compliance
- Sync CLAUDE.md and DESIGN_SYSTEM.md color values with actual CSS
  (#f8f6f3 bg, #1c1917 ink, #2e7a6e teal, #fefdfb cards)
- Restore deleted reference sections in DESIGN_SYSTEM.md: typography,
  spacing, transitions, toast, layout constants

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Update intro wording ("warm ink tones" vs "near-monochrome"), fix
launcher icon dark background color (#1c1917), and restore deleted
reference sections (typography, spacing, transitions, toast, layout
constants) that the docs-sync agent wrote after the prior commit.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The minimalist redesign stripped all per-launcher brand backgrounds,
leaving icons like Claude (white glyph on generic gray) visually broken.
Restore solid brand bg for Claude and subtle brand tints for VS Code,
Codex, Gemini, WezTerm, Alacritty, and Kitty in both light and dark mode.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add design-system.html — a standalone component showcase accessible at
/design-system.html during dev, with Light/Dark/System toggle. Covers
all tokens (ink, teal, surfaces, semantic), buttons, badges, forms,
cards, launcher icons, file status, diff, commits, toasts, worktree
list, action logs, and typography.

Also tune dark mode CSS variables for better contrast: lift solid
surfaces, bump transparent overlay opacities, strengthen borders and
shadows so elements read clearly on dark backgrounds.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Base automatically changed from feat/minimalist-ui-redesign to main March 31, 2026 02:27
rrbe and others added 2 commits March 31, 2026 10:30
Keep the tuned dark mode tokens from this branch (higher contrast
surfaces, borders, and shadows) over main's lower-contrast defaults.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…w tip

- Add design-system.html preview workflow to CLAUDE.md, AGENTS.md, and
  DESIGN_SYSTEM.md (use Chrome DevTools MCP to verify color changes live)
- Fix UI Layout in CLAUDE.md: tabs moved from topbar to 48px sidebar
- DESIGN_SYSTEM.md: add complete dark mode token tables, fix font stacks,
  fix form control dark bg, add sidebar navigation section, add live preview

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@rrbe rrbe merged commit 76ab04f into main Mar 31, 2026
3 checks passed
@rrbe rrbe deleted the feat/design-system-preview branch March 31, 2026 02:50
@rrbe rrbe restored the feat/design-system-preview branch March 31, 2026 02:54
@rrbe rrbe added the Feature label Apr 8, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant